import React from 'react';
import { connect } from 'dva';
import { WingBlank, WhiteSpace, Flex, List, InputItem, Picker, DatePicker, Button, Toast, Checkbox } from 'antd-mobile';
import { createForm } from 'rc-form';
import { todayDate, todayMonth } from 'const';

// moment definition
const genderList = [
  { label: '男', value: 1 },
  { label: '女', value: 2 },
];
const nowTimeStamp = Date.now();
const now = new Date(nowTimeStamp);
const utcOffset = new Date(now.getTime() - (now.getTimezoneOffset() * 60000));
const minDate = new Date(1900, 1, 1);
const maxDate = now;
const { CheckboxItem, AgreeItem } = Checkbox;
// gender definition


const SignupUserInfoPage = ({ dispatch, form, location, gender, ...rest }) => {

  const { getFieldProps, setFieldsValue, getFieldError, validateFields } = form;
  const signup = () => validateFields((errors, value) => {
    if (errors) {
      const fieldNames = Object.keys(errors);
      if (fieldNames[0]) {
        return Toast.fail(getFieldError(fieldNames[0]));
      }
    }
    value.gender = gender;
    
    let d = value.birthday;
    d = d.getFullYear() + '-' + todayMonth[(d.getMonth() + 1)] + '-' + todayDate[d.getDate()];
    value.birthday=d;

    value.smsCode = location.state.code;

    // 身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X  
    let regIdNo = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;  
    if(!regIdNo.test(value.idNumber)){  
        Toast.fail('身份证号填写有误');  
        return false;  
    }  

    dispatch({
      type: 'account/signup',
      payload: {
        ...value,
        ...location.state,
        openid: location.query.openid,
      },
    });
  });

   const checkGender = (value) => {
      dispatch({ 
        type: 'account/save', 
        payload: { 
          gender: value 
      }});
  };


  return (
    <WingBlank size="md">
      <WhiteSpace />
      <List>
        <InputItem
          {...getFieldProps('name', {
            validate: [{
              trigger: false,
              rules: [{ required: true, message: '请输入姓名' }],
            }],
          })}
          placeholder="请输入"
        >姓名</InputItem>
        <InputItem 
          extra={genderList.map(i => (
            <div style={{float: 'left'}} >
             <AgreeItem 
                checked = {gender === i.value} 
                onChange={() => checkGender(i.value)}
              >
                {i.label}
              </AgreeItem>
          </div>
          ))}
        >性别</InputItem>
        <DatePicker
          {...getFieldProps('birthday', {
            validate: [{
              trigger: false,
              rules: [{ required: true, message: '请选择出生年月' }],
            }],
          })}
          mode="date"
          title="请选择"
          minDate={minDate}
          maxDate={maxDate}
        >
          <List.Item arrow="horizontal">出生年月</List.Item>
        </DatePicker>
        <InputItem
          {...getFieldProps('idNumber', {
            validate: [{
              trigger: false,
              rules: [{ required: true, message: '请填写身份证' }],
            }],
          })}
          placeholder="一旦填写不可修改"
          type="string"
          maxLength={18}
        >身份证</InputItem>
        <WhiteSpace />
        <WingBlank size="md">
          <Button type="primary" onClick={signup}>确认</Button>
        </WingBlank>
        <WhiteSpace size="xl" />
      </List>
    </WingBlank>
  );
};

export default connect(({ account }) => ({ ...account }))(createForm()(SignupUserInfoPage));
